<template>
	<div v-show="!!props.selectedRows.length" class="global-table-batch-operation">
		<div class="_left">
			<span class="font-14 cancel-select" @click="CancelSelectedRows">取消选中</span>
			<div class="_line"></div>
			<span class="font-14 _select">{{ `已选中 ${props.selectedRows.length} 条` }}</span>
		</div>

		<div class="_right">
			<slot name="Slot-Table-Btns"></slot>
		</div>
	</div>
</template>

<script setup lang="ts" name="global-table-batch-operation">
type _Props = {
	// 是否显示选中的统计
	showSelected?: boolean;
	// 选中的列表行数据id集合
	selectedRows?: (string | number)[];
};

const props = withDefaults(defineProps<_Props>(), {
	showSelected: true,
	selectedRows: () => []
});

const emits = defineEmits<{
	(e: 'update:selectedRows', rowKeys: []): void;
	// 批量操作的按钮click事件
	(e: 'click', btnCode: string): void;
}>();

// 取消已勾选的
const CancelSelectedRows = (): void => {
	console.log(props.selectedRows.length);

	props.selectedRows.length && emits('update:selectedRows', []);
};
onMounted(() => {
	// console.log(props.selectedRows.length, '-------------');
});
</script>

<style lang="less" scoped>
.global-table-batch-operation {
	display: grid;
	height: 52px;
	padding: 8px 36px;
	background-color: @background02;
	grid-template-columns: auto 1fr;
	grid-column-gap: 100;
	align-items: center;
	box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.25);

	._left {
		display: flex;
		align-items: center;

		.cancel-select {
			color: @link01;

			&:hover {
				opacity: 0.85;
				cursor: pointer;
			}
		}

		._select {
			line-height: 22px;
			color: @text01;
		}

		._line {
			width: 1px;
			height: 36px;
			margin: 0 32px;
			background-color: @borderColor02;
		}
	}

	._right {
		display: flex;
		align-items: center;

		button {
			display: flex;
			height: 36px;
			margin-left: 32px;
			border: 1px solid @borderColor02;
			border-radius: 6px;
			padding: 8px 16px;
			line-height: 22px;
			color: @text01;
			background: none;
			box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
			justify-content: center;
			align-items: center;
			gap: 6px;
		}
	}
}
</style>
